import {View, ScrollView, Text, Image, Button, Radio} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React from 'react';
import {connect} from 'react-redux';
import * as T from './types';
import './index.less';
import actions from './actions';
import {store2Props} from './selectors';
import {AtTabs, AtTabsPane} from 'taro-ui';
import 'taro-ui/dist/style/components/tabs.scss';
import ToBeCollected from './components/toBeCollected';
import ToBeDelivered from './components/toBeDelivered';
import Shipped from './components/shipped';
import Expired from './components/expired';
import Tab from './components/tab';
import notdata from '@/assets/image/ipland/notdata.png';

//@ts-ignore
actions().actions.loadReducer();
//@ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class packageICollectionCabinet extends React.Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      down: false,
      selectIndex: 1,
      // current: 0,
    };
  }

  componentDidMount() {
    let params = Taro.getCurrentInstance()?.router?.params;
    const selectIndex = parseInt(`${params.prizeStatus}`);
    // 收藏进来的就直接去首页
    // eslint-disable-next-line no-restricted-globals
    if (selectIndex && !isNaN(selectIndex)) {
      this.setState({
        selectIndex,
      });
    }
    this.props.actions.init(selectIndex);
  }
  componentWillUnmount() {
    this.props.actions.clean();
  }
  async _refresh() {
    const {
      actions: {action},
      main: {searchParams},
    } = this.props;
    let {down} = this.state;
    this.setState({
      down: true,
    });
    // down = true;
    if (down) return;
    action.commonChange('main.searchParams', {
      pageNum: 0,
      pageSize: 10,
      prizeStatus: searchParams.prizeStatus,
      sortFlag: 'desc',
    });
    try {
      await action.page(true);
    } finally {
      this.setState({
        down: false,
      });
    }
  }
  nextPage() {
    const {
      actions: {action},
      main: {searchParams, status},
    } = this.props;
    if (status !== 'ready') return;
    const pageNum = searchParams.pageNum + 1;
    action.commonChange('main.searchParams.pageNum', pageNum);
    action.commonChange('main.status', 'loading');
    action.page();
  }

  render() {
    // let {current} = this.state;
    // const tabList = [{title: '待领取'}, {title: '已发货'},  {title: '已失效'}];
    const {
      main: {list, searchParams, status, allcheck},
      actions: {action},
    } = this.props;
    console.log(list);
    return (
      <View className="packageICollectionCabinet">
        <Tab
          selectIndex={this.state.selectIndex}
          setSelectIndex={(i: number) => {
            this.setState({
              selectIndex: i,
            });
          }}
        />
        <ScrollView
          refresher-enabled
          refresherBackground="#F7F6F6"
          refresher-triggered={this.state.down}
          className="packageICollectionCabinet-Scroll"
          scrollY
          onScrollToLower={() => this.nextPage()}
          onRefresherRefresh={() => this._refresh()}
          style={{paddingBottom: `${searchParams.prizeStatus == 1 ? 132 : 0}rpx`}}
        >
          {list.map((e, i) => (
            <View key={e.id}>
              {searchParams.prizeStatus == 0 && <ToBeCollected item={e} i={i} />}
              {searchParams.prizeStatus == 1 && <ToBeDelivered item={e} i={i} />}
              {searchParams.prizeStatus == 2 && <Expired item={e} />}
              {/* <Expired item={e} /> */}
            </View>
          ))}
          {list.length <= 0 && status === 'none' && (
            <View className="notdataBox">
              <View className="notdataCon">
                <Image className="notdatabg" src={notdata} mode="widthFix" />
                <Text className="notdataText">空空如也。快去乐园挖掘填满收藏柜吧！</Text>
                <Text
                  className="notdataToSearch"
                  onClick={() => {
                    Taro.navigateBack({delta: 2});
                    // Taro.showToast({
                    //   title: '跳转魔力主题乐园首页',
                    // });
                  }}
                >{`去看看 >>`}</Text>
              </View>
            </View>
          )}
          {list.length >= 0 && status === 'end' && <View className="endText">没有更多了</View>}
          {list.length >= 0 && status === 'loading' && <View className="endText">加载中</View>}
        </ScrollView>
        {searchParams.prizeStatus == 1 && (
          <View className="bulkOrder">
            {/* <Radio className='bulkOrder-radio' checked={allcheck} onClick={e => {
            const newAllchecked = !allcheck;
            action.commonChange("main.list", list.map(e => ({ ...e, checked: newAllchecked })))
            action.commonChange("main.allcheck", newAllchecked)
          }}>全选</Radio> */}
            <View
              className="bulkOrder-btn"
              onClick={() => {
                action.placeOrder();
              }}
            >
              下单
            </View>
          </View>
        )}
      </View>
      // <View className="packageICollectionCabinet">
      //   <View className="changeSortBox">
      //     <Image className="changeSortIcon" src={refresh} mode="widthFix" />
      //     <Text className="changeSortIcon-text">获取时间</Text>
      //   </View>
      //   <AtTabs scroll current={current} tabList={tabList} onClick={this.handleClick.bind(this)}>
      //     <AtTabsPane current={current} index={0}>
      //       {/* <ToBeCollected /> */}
      //     </AtTabsPane>
      //     <AtTabsPane current={current} index={1}>
      //       {/* <ToBeDelivered /> */}
      //     </AtTabsPane>
      //     {/* <AtTabsPane current={current} index={2}>
      //       <Shipped />
      //     </AtTabsPane> */}
      //     <AtTabsPane current={current} index={2}>
      //       {/* <Expired />  */}
      //     </AtTabsPane>
      //   </AtTabs>
      // </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
